<template>
	<view class="anchor">
		<!-- 定位 -->
		<view class="anchor-location">
			<text class="cs">定位城市</text>
			<view class="location">
				<view class="city">长沙</view>
				<view class="relocation" @click="clickLocation">重新定位</view>
			</view>
		</view>
		<!-- 热门城市 -->
		<view class="hot-city">
			<text class="cs">定位城市</text>
			<view class="city-list">
				<view @click="clickHome(item)" class="city-item" v-for="item in cityList" :key="item">{{ item }}</view>
			</view>
		</view>
		<!-- 选择城市 -->
		<view class="choice">
			<van-index-bar @select="selectBar">
				<view v-for="(item, i) in choiceCityList" :key="i">
					<van-index-anchor :index="item.code" />
					<van-cell @click="clickHome(value)" v-for="(value, index) in item.cityList" :key="index" :title="value" />
				</view>
			</van-index-bar>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { choiceCityList } from '@/utils/city.js'
import { UserCity } from '@/store/city.js'
import { reactive, toRefs } from 'vue'
import { storeToRefs } from 'pinia'

const userCity = UserCity()

const state = reactive({
	cityList: ['承德', '北京', '广州', '上海', '南京', '杭州', '武汉', '成都', '天津', '哈尔滨', '重庆', '长沙']
})
const clickLocation = async () => {
	uni.getLocation({
		success: res => {
			console.log('当前位置的经度：' + res.longitude)
			console.log('当前位置的纬度：' + res.latitude)
		}
	})
}

const selectBar = e => {
	console.log(1)
	console.log(e)
}
const clickHome = item => {
	userCity.reviseCity(item)
	setTimeout(() => {
		uni.switchTab({
			url: `/pages/index/index`
		})
	}, 300)
}
// 页面加载
onLoad(message => {})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { cityList } = toRefs(state)
const { city } = storeToRefs(userCity)
</script>

<style lang="scss">
.anchor {
	.cs {
		color: #848c99;
	}
	.anchor-location {
		.location {
			width: 95%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			margin-bottom: 30rpx;
			.city {
				margin-left: 35rpx;
				font-weight: 600;
				font-size: 32rpx;
			}
			.relocation {
				margin-right: 30rpx;
			}
		}
	}

	.hot-city {
		.city-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 40rpx;
			.city-item {
				width: 190rpx;
				height: 68rpx;
				background-color: #f2f4f7;
				line-height: 68rpx;
				text-align: center;
				border-radius: 10rpx;
				margin: 20rpx 20rpx 20rpx 0;
			}
		}
	}

	.choice {
		.van-cell__title {
			margin-left: 30rpx;
		}
		.title-class {
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
}
</style>
